<template>
  <div class="user-info">
    <el-card class="box-card">
      <div class="avatar">
        <el-avatar :size="70" :src="headImg(row.sysUser)"></el-avatar>
        <p>{{ row.sysUser.userName }}</p>
      </div>
      <div class="btn">
        <el-row :gutter="20" class="count">
          <el-col :span="12">
            <b>{{ fansCount }}</b>
            <p>粉丝</p>
          </el-col>
          <el-col :span="12">
            <b>{{ followCount }}</b>
            <p>关注</p>
          </el-col>
        </el-row>
        <el-button
          type="primary"
          size="mini"
          v-if="row.sysUser.id != userId"
          @click="handleFans()"
        >
          {{ followRelation == 0 ? '关注' : '取消关注' }}
        </el-button>
        <el-button
          type="primary"
          size="mini"
          v-if="row.sysUser.id != userId"
          @click="handleMessage(row)"
          >发私信</el-button
        >
      </div>
    </el-card>
    <SendMessage />
  </div>
</template>
<script>
import setInfo from '@/mixins/setInfo'
import userInfo from '@/mixins/userInfo'
import Bus from '@/utils/bus.js'
export default {
  mixins: [setInfo, userInfo],
  components: {
    SendMessage: () => import('@/components/sendMessage'),
  },
  data() {
    return {
      fansCount: '',
      followCount: '',
      followRelation: '',
    }
  },
  props: ['row'],
  mounted() {
    this.getUserInfo()
  },
  methods: {
    async getUserInfo() {
      let res = await this.$store.dispatch('myInfoBbsFans', this.row.sysUser.id)
      this.fansCount = res.data[0].fansCount || 0
      this.followCount = res.data[0].followCount || 0
      this.followRelation = res.data[0].followRelation || 0
    },
    //关注
    async handleFans() {
      let obj = {
        userId: this.row.sysUser.id,
        fansId: this.userId,
        relation: 1,
      }
      this.followRelation == 0
        ? await this.$store.dispatch('addBbsFans', obj)
        : await this.$store.dispatch('cancelBbsFans', obj.userId)
      this.getUserInfo()
      this.successMsg('操作成功')
    },

    // 发送私信
    handleMessage(row) {
      Bus.$emit('sendMessage', [row.sysUser.id])
    },
  },
}
</script>
<style scoped lang="scss">
.user-info {
  .avatar {
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 1px solid #eee;
    p {
      color: #6b7785;
      font-weight: bold;
      line-height: 24px;
    }
  }
  .btn {
    text-align: center;
    padding-top: 10px;
    .count {
      margin-bottom: 20px;
      b {
        font-size: 16px;
        font-weight: 600;
        color: #4e5969;
      }
      p {
        font-size: 12px;
        color: #86909c;
      }
    }
  }
}
</style>